<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>重点水库水生态智慧管理平台</title>
    <!-- 引入Element -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="${contextPath}/css/ElementCss/theme/index.css">
    <link rel="stylesheet" href="${contextPath}/css/login.css"/>
    <style>
        /*这个是去除谷歌自带的样式*/
        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px white inset;
            border: 1px solid #CCC !important;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body class="body_backgourd">
<!-- element必须写到vue里面 -->
<div id="loginDiv" class="content" v-cloak>
    <div class="loginDiv loginimg"></div>
    <div class="loginDiv loginFrom">
        <!-- 这里是表单 -->
        <!-- model：绑定事件 -->
        <el-form ref="form" :model="form">
            <div class="title"> {{$t('loginJs.title')}}<br/>
                <div style="width: 100%;height: 10px"></div>
                <span style="font-size: 17px;margin-top: 2px"> {{$t('loginJs.subhead')}}</span>
            </div>
            <div class="formInput">
                <el-input :placeholder="$t('loginJs.useNamePrompt')" v-model="form.name" @change="checkusername">
                    <template slot="prepend"><img src="${contextPath}/img/login/userName.png"/></template>
                </el-input>
            </div>
            <div class="formInput">
                <el-input type="password" :placeholder="$t('loginJs.passWordPrompt')" v-model="form.password">
                    <template slot="prepend"><img src="${contextPath}/img/login/passWord.png"/></template>
                </el-input>
            </div>
            <br/> <br/> <br/>
            <!--   <div class="formInput">
                  <el-checkbox v-model="form.remember" @change="savePwd">记住密码</el-checkbox>
              </div> -->
            <el-button class="formInput" @click="loginSub" type="primary">{{$t('loginJs.submitButton')}}</el-button>
        </el-form>
    </div>
</div>

</body>

<script src="${contextPath}/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/js/elementIndex.js"></script>
<script src="${contextPath}/js/vue-resource.js"></script>
<%--语言库--%>
<script src="${contextPath}/js/language/languages.js"></script>
<%--语言js--%>
<script src="${contextPath}/js/language/vue-i18n.js"></script>
<%--公共方法--%>
<script src="${contextPath}/js/homeJS/publicTool.js"></script>

<script>

    const i18n = new VueI18n({
        locale: 'zh', // 设置默认
        messages
    });

    var em = new Vue({
        el: loginDiv,
        i18n,
        data: {
            type: [],
            checked: false,
            form: {
                name: '',
                password: '',
                remember: ''
            }
        },
        created() {
            this.$i18n.locale = this.common.Initial();
        },
        methods: {
            //登陆点击事件
            loginSub() {
                const loading = this.$loading({
                    lock: true,
                    text: '登录中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                var password = this.form.password;
                this.$http.post('${contextPath}/loginVerify.do', {
                    userName: this.form.name,
                    passWord: password,
                }, {emulateJSON: true}).then(function (res) {
                    if (res.data.code == 1) {
                        loading.close();
                        window.location.href = "/home/home.do";
                    } else {
                        loading.close();
                        this.$message.error('账号密码错误！');
                    }
                });
                //
            }
            , savePwd() {  //保存密码
                var checkboxStatus = this.form.remember;
                var inpUser = this.form.name;
                var passwordUser = this.form.password;
                console.log(inpUser, passwordUser);
                if (checkboxStatus == true) {
                    // console.log("记住密码");
                    sessionStorage.setItem(inpUser, passwordUser);
                }
                else {
                    // console.log("清理密码");
                    sessionStorage.removeItem(inpUser);
                }
                ;
            }, checkusername() {  //账号框失去焦点然后就获得密码
                var inpUser = this.form.name;
                /*console.log("inpUser",inpUser);*/
                //从sessionstory中取值
                var sessionipUser = sessionStorage.getItem(inpUser);
                this.form.password = sessionipUser;
            }
        }
    })
</script>
</html>
